<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加系统</el-button>
            </el-form-item>
            <el-form-item label="关键词：" prop="keyword">
              <el-input v-model="queryParams.keyword" placeholder="请输入系统名称..." maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="启用状态" prop="status">
              <el-select v-model="queryParams.status" class="m-2" placeholder="请选择启用状态" clearable>
                <el-option
                  v-for="item in [{value:1,label:'启用中'},{value:0,label:'禁止中'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click.prevent="handleSearch">搜索</el-button>
              <el-button type="danger" icon="Refresh" @click.prevent="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" stripe border :height="settings.tableHeight()">
          <el-table-column fixed label="系统编号" :label="'总数：' + total" width="150" prop="id" align="center"></el-table-column>
          <el-table-column fixed label="系统名称" align="center">
            <template v-slot="scope">
              <div class="flex align-center">
                <img :src="scope.row.logo" style="width: 28px;height: 28px;" class="el-avatar--circle"/><span class="ml20">{{scope.row.sysname}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed label="web域名" prop="domain"  align="center">
            <template v-slot="scope">
              <span class="mr5">{{scope.row.domain}}</span>
              <el-button type="success" @click="copyText(scope.row.domain)">复制</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed label="系统代号" prop="syscode"  align="center"/>
          <el-table-column label="是否启用" width="200" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.openFlag"
               @change="handleStatus(scope.row,'openFlag')"
               :active-value="1"
               active-text="启用中"
               inactive-text="已禁止"
               :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200" align="center">
            <template #default="scope">
              <span>{{ formatTimeToStr(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="200" align="center">
            <template #default="scope">
              <span>{{ formatTimeToStr(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
              <el-button icon="remove" type="danger" size="small" @click.stop="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="kva-pagination-box center">
          <el-pagination :current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </home-page-header>
    </div>
    <add-system ref="addRef" @load="handleSearch"></add-system>
  </div>
</template>

<script  setup>
import settings from '@/settings'
import KVA from '@/utils/kva.js'
import copyText from '@/utils/copy.js'
import { formatTimeToStr } from '@/utils/date.js'
import AddSystem from './components/AddSystem.vue'
import {
  findPages,
  delById,
  updateStatus,
  updateStatusDefault
} from '@/api/platform/system.js'

// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  openFlag:"",
  defaultFlag:"",
  keyword: ""
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})

// 编辑添加相关
const addRef = ref({})

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}

// 分页size更改
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  handleLodeData()
}

// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}


// 添加事件
const handleAdd = () => {
  addRef.value.handleOpen()
}

// 编辑
const handleEdit = (row) => {
  addRef.value.handleOpen(row.id)
}

// 删除
const handleDel =  (row) => {
  KVA.confirm("警告", "<strong>您确定要执行此次操作吗？</strong>", { icon: "success" }).then(async() => {
      const opid = row.id
      await delById(opid)
      KVA.notifySuccess("删除成功!")
      handleLodeData()
  })
}

// 更新状态
const handleStatus = async (row,field) => {
    await updateStatus(row.id, field, row[field])
    KVA.notifySuccess("操作成功!")
    handleLodeData()
}

// 设置默认
const handleStatusDefault = async (row) => {
    tableData.value.map(c => c.defaultFlag = 0)
    await updateStatusDefault(row.id)
    row.defaultFlag = 1
    KVA.notifySuccess("更新成功!")
}

onMounted(() => {
  handleLodeData()
})

</script>


